<!-- 首页 -->
<template>
	<view>
		<u-navbar :isBack="false" title="同城搭子"></u-navbar>
		<view class="top-box">
			<view class="shaixuan-box">
				<u-icon name="shaixuan" custom-prefix="iconfont"></u-icon>
				<view>筛选</view>
			</view>
			<view class="tab-box">
				<view class="tab-bar active">推荐</view>
				<view class="tab-bar">附近</view>
				<view class="tab-bar">最新</view>
			</view>
		</view>
		<view class="card-box">
			<view class="card-item-box">
				<u-image width="180rpx" height="230rpx" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220823/610e7808e0304722b4f021bfbfe7b04b.jpg"></u-image>
				<view class="card-right">
					<view class="user-info-top">
						<view class="nickname-box">
							<u-icon name="ziyuan2" color="#fe709f" size="30" custom-prefix="iconfont"></u-icon>
							<view class="nickname">奶糖宝宝果</view>
						</view>
						<view class="card-tag">微信认证</view>
					</view>
					<view class="tag-box">
						<view class="tag">24</view>
						<view class="tag">学生</view>
						<view class="tag">未婚</view>
						<view class="tag">172cm</view>
					</view>
					<view class="sign-name">物质和生活各占一半是最好的状态物质和生活各占一半是最好的状态</view>
					<view class="footer-box">
						<view>5张照片</view>
						<view>北京市 1.5km</view>
					</view>
				</view>
			</view>
			
			<view class="card-item-box">
				<u-image width="180rpx" height="230rpx" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220822/82c6fc005c7c4b9d88c0391e356d68ef.jpg"></u-image>
				<view class="card-right">
					<view class="user-info-top">
						<view class="nickname-box">
							<u-icon name="ziyuan3" color="#2b85e4" size="30" custom-prefix="iconfont"></u-icon>
							<view class="nickname">奶糖宝宝果</view>
						</view>
						<view class="card-tag">微信真人认证</view>
					</view>
					<view class="tag-box">
						<view class="tag">24</view>
						<view class="tag">学生</view>
						<view class="tag">未婚</view>
						<view class="tag">172cm</view>
					</view>
					<view class="sign-name">物质和生活各占一半是最好的状态</view>
					<view class="footer-box">
						<view>5张照片</view>
						<view>北京市 1.5km</view>
					</view>
				</view>
			</view>
			
			<view class="card-item-box">
				<u-image width="180rpx" height="230rpx" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220822/82c6fc005c7c4b9d88c0391e356d68ef.jpg"></u-image>
				<view class="card-right">
					<view class="user-info-top">
						<view class="nickname-box">
							<u-icon name="ziyuan2" color="#fe709f" size="30" custom-prefix="iconfont"></u-icon>
							<view class="nickname">奶糖宝宝果</view>
						</view>
						<view class="card-tag">微信真人认证</view>
					</view>
					<view class="tag-box">
						<view class="tag">24</view>
						<view class="tag">学生</view>
						<view class="tag">未婚</view>
						<view class="tag">172cm</view>
					</view>
					<view class="sign-name">物质和生活各占一半是最好的状态</view>
					<view class="footer-box">
						<view>5张照片</view>
						<view>北京市 1.5km</view>
					</view>
				</view>
			</view>
			
			<view class="card-item-box">
				<u-image width="180rpx" height="230rpx" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220822/82c6fc005c7c4b9d88c0391e356d68ef.jpg"></u-image>
				<view class="card-right">
					<view class="user-info-top">
						<view class="nickname-box">
							<u-icon name="ziyuan2" color="#fe709f" size="30" custom-prefix="iconfont"></u-icon>
							<view class="nickname">奶糖宝宝果</view>
						</view>
						<view class="card-tag">微信真人认证</view>
					</view>
					<view class="tag-box">
						<view class="tag">24</view>
						<view class="tag">学生</view>
						<view class="tag">未婚</view>
						<view class="tag">172cm</view>
					</view>
					<view class="sign-name">物质和生活各占一半是最好的状态</view>
					<view class="footer-box">
						<view>5张照片</view>
						<view>北京市 1.5km</view>
					</view>
				</view>
			</view>
			
			<view class="card-item-box">
				<u-image width="180rpx" height="230rpx" src="http://rbtnet.oss-cn-hangzhou.aliyuncs.com/test/20220822/82c6fc005c7c4b9d88c0391e356d68ef.jpg"></u-image>
				<view class="card-right">
					<view class="user-info-top">
						<view class="nickname-box">
							<u-icon name="ziyuan2" color="#fe709f" size="30" custom-prefix="iconfont"></u-icon>
							<view class="nickname">奶糖宝宝果</view>
						</view>
						<view class="card-tag">微信真人认证</view>
					</view>
					<view class="tag-box">
						<view class="tag">24</view>
						<view class="tag">学生</view>
						<view class="tag">未婚</view>
						<view class="tag">172cm</view>
					</view>
					<view class="sign-name">物质和生活各占一半是最好的状态</view>
					<view class="footer-box">
						<view>5张照片</view>
						<view>北京市 1.5km</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
export default {
	components: {
		
	},
	props:{
		
	},
	data() {
		return {
			list: [
				'请在我的主页完成实名认证',
				'实名认证成功可以显示在脱单墙',
			]
		};
	},
	created() {
		
	},
	destroyed() {
		// 注销全局配置监听
	},
	methods: {
		
		
	}
}; 
</script>

<style lang="scss" scoped>
	.top-box {
		padding: 10px;
		padding-bottom: 0;
		display: flex;
		justify-content: space-between;
	}
	.shaixuan-box {
		display: flex;
		border: 1px solid #ddd;
		width: 130rpx;
		padding: 3px 0;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		font-size: 32rpx;
	}
	.tab-box {
		display: flex;
	}
	.tab-bar {
		border: 1px solid #ddd;
		margin-left: 10px;
		padding: 3px 15px;
		border-radius: 5px;
		font-size: 32rpx;
	}
	.card-box {
		padding: 10px;
	}
	.card-item-box {
		display: flex;
		border: 1px solid #ddd;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
	}
	.card-right {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-left: 10px;
	}
	.user-info-top {
		display: flex;
		justify-content: space-between;
	}
	.nickname-box {
		display: flex;
		align-items: center;
	}
	.nickname {
		font-size: 30rpx;
		margin-left: 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 100px;
	}
	.tag-box {
		display: flex;
		align-items: center;
		line-height: 20px;
		margin: 10px 0;
	}
	.tag {
		font-size: 30rpx;
		margin-right: 10px;
	}
	.sign-name {
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 440rpx;
	}
	.footer-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 10px 0;
		margin-bottom: 0;
		font-size: 30rpx;
	}
	.card-tag {
		background-color: #f4ba61;
		font-size: 22rpx;
		padding: 2px 5px;
		display: flex;
		align-items: center;
	}
	.active {
		background-color: #ddd;
	}
</style>
